export function SSCAnimate(option) {
    let defaultOption = {
        el: null, // 一个宽高固定的容器
        nums: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 候选数字
        onEnd(num) { // 开奖结束回调
            console.log(num)
        },
    }
    option = { ...defaultOption, ...option }

    this.el = typeof option.el == 'string' ? document.querySelector(option.el) : option.el
    this.nums = option.nums
    this.curNum = this.getRandomNum()
    this.onEnd = option.onEnd
    this.height = this.el.offsetHeight
    this.running = false
    this.render()
}

Object.assign(SSCAnimate.prototype, {
    getRandomNum() { // 随机获取一个与当前num不同的num
        let l = this.nums.length
        let num = this.nums[Math.floor(Math.random() * l)]
        if (num == this.curNum) return this.getRandomNum()
        return num
    },
    render() {
        this.el.innerHTML = this.curNum
    },
    start(option) {
        if (this.running) return
        this.running = true
        let defaultOption = {
            outMS: 50, // 每次数字中间落到底部的动画时长
            inMS: 50, // 每次数字从上面落入中间的动画时长
            times: 40, // 数字变化的次数
            delay: 0, // 延迟多少ms开启动画
        }
        option = { ...defaultOption, ...option }
        let count = 0, { outMS, inMS, times } = option
        let animate = () => {
            Object.assign(this.el.style, {
                lineHeight: `${this.height * 2}px`,
                transition: `line-height ${outMS}ms linear`
            })
            setTimeout(() => {
                Object.assign(this.el.style, {
                    lineHeight: '0px',
                    transition: 'none',
                })
                setTimeout(() => {
                    this.curNum = this.getRandomNum()
                    this.render()
                    Object.assign(this.el.style, {
                        lineHeight: `${this.height}px`,
                        transition: `line-height ${inMS}ms linear`,
                    })
                    setTimeout(() => {
                        if (++count == times) {
                            this.onEnd(this.curNum)
                            this.running = false
                        } else {
                            animate.call(this)
                        }
                    }, inMS)
                }, 20)
            }, outMS)
        }
        setTimeout(animate, option.delay);
    },
})